<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 15:22:56
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-27 17:13:45
 * @FilePath: /bangand-low-code/src/layouts/components/LayoutSideBar.vue
 * @Description: 右侧菜单
-->
<template>
  <a-drawer
    v-if="isMobile"
    placement="left"
    :class="prefixCls"
    :width="menuWidth"
    :getContainer="null"
    :visible="!sideCollapsed"
    :bodyStyle="{
      padding: 0
    }"
    @close="handleClose"
  >
    <LayoutSider />
  </a-drawer>
  <LayoutSider v-else />
</template>

<script>
import Vue from 'vue';
import { objectUtils } from '@/utils';
import LayoutSider from './LayoutSider.vue';
import { SIDEBAR_TYPE } from '@/store/mutation-types';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';

export default {
  // 组件的名字或者页面的名字
  name: 'LayoutSideBar',
  mixins: [appLatyouMixin],
  // 加载组件
  components: {
    LayoutSider
  },
  // 父级组件传过来的值
  props: {},
  // 页面数据
  data() {
    return {
      prefixCls: 'layout-sider-wrapper'
    };
  },
  computed: {},
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {
    // 关闭菜单
    handleClose() {
      this.$store.commit(`app/${SIDEBAR_TYPE}`, true);
    }
  }
};
</script>

<style lang="less" >
.layout-sider-wrapper {
  .p-layout-sideBar {
    height: 100vh;
  }
}
</style>
